<template>
  <div class="el-row">
    <div class="el-col-4 avatar">
      <el-avatar size="large" :src="follow.avatar_url" shape="square"></el-avatar>
    </div>
    <div class="el-col-14 el-col-offset-1 info">
      <div class="user-link">
        <router-link style="text-decoration: none; color: rgb(74,138,244);" class="hah" :to="`/app/user_info/${follow.user_id}/Answer`">{{follow.nickname}}</router-link>
      </div>
      <div class="sig">
        <p>{{follow.signature}}</p>
      </div>
      <div class="AF">
        <p>{{follow.answer_num}}回答&nbsp;·&nbsp;{{follow.fans_num}}关注者</p>
      </div>
    </div>
    <div class="el-col-5 but">
      <el-button type="primary" v-if="F_B" @click="changeU">取消关注</el-button>
      <el-button type="primary" v-else @click="changeF">关注</el-button>
    </div>
  </div>
</template>

<script>
import {followUser, unFollowUser} from "@/network/user";

export default {
  name: "FollowCard",
  data() {
    return{
      F_B: true
    }
  },
  methods: {
    changeU() {
      this.F_B = !this.F_B
      unFollowUser(this.t_user_id,this.follow.user_id)
    },
    changeF() {
      this.F_B = !this.F_B
      followUser(this.t_user_id,this.follow.user_id)
    },
  },
  props: {
    follow: {
      type: Object,
      default: {
        avatar_url: "",     // 关注人用户头像
        user_id: 0,         // 关注人的id
        nickname: "nickname", // 回答问题的用户昵称
        signature: "",      // 关注人的简介
        fans_num: 0,        // 关注人粉丝数
        answer_num: 0       // 关注人回答数
      }
    },
    t_user_id: 0
  },
}
</script>

<style scoped lang="scss">
.user-link {
  font-weight: bold;
  font-size: 20px;
  margin-left: 10px;
  padding-top: 20px;
  //a {
  //  color: #4a8af4;
  //}
  //&:hover {
  //  text-decoration: underline;
  //}
}

.sig {
  margin-top: 0;
  font-weight: normal;
  font-size: 14px;
  margin-left: 10px;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.info {
  align-items: center;
}

.AF {
  margin-top: 0;
  font-weight: normal;
  font-size: 14px;
  margin-left: 10px;
}

.hah {
  &:hover {
    text-decoration: rgb(74,138,244);
  }
}

.but {
  align-items: center;
  display: flex;
}
</style>